<template>
  <div class="home-page">
    <a-layout>
      <sideMenu :collapsedValue="collapsed" />
      <a-layout>
        <headerPage @handleClickCollapse="handleClickCollapse" />
        <a-layout-content style="position: relative;">
          <!-- <a-breadcrumb separator=">">
            <a-breadcrumb-item>Home</a-breadcrumb-item>
            <a-breadcrumb-item><a href="">Application Center</a></a-breadcrumb-item>
            <a-breadcrumb-item><a href="">Application List</a></a-breadcrumb-item>
            <a-breadcrumb-item>An Application</a-breadcrumb-item>
          </a-breadcrumb>-->
          <router-view />
        </a-layout-content>
      </a-layout>
    </a-layout>
  </div>
</template>

<script>
import sideMenu from '../sideMenu'
import headerPage from '../header'

export default {
  name: 'mainPage',
  components: {
    sideMenu,
    headerPage,
  },
  data() {
    return {
      collapsed: false,
    }
  },
  methods: {
    handleClickCollapse(collapsed) {
      this.collapsed = collapsed
    },
  },
}
</script>

<style lang="less">
.home-page {
  height: 100vh;
  overflow-y: auto;
}
.ant-layout {
  height: 100%;
}

.ant-layout-content {
  height: calc(100% - 120px);
  overflow: auto;
  padding: 10px;
}
</style>